<button
  nz-button
  (click)="handleAdd()"
  [nzLoading]="submitting"
  class="add-btn"
>
  {{ $t('_addRow') }}
</button>

<button
  nz-button
  nzType="primary"
  (click)="handleSubmit()"
  [nzLoading]="submitting"
>
  {{ $t('_save') }}
</button>

<div class="mb12">
  <b>{{ $t('_buildTip') }}</b>
</div>
<nz-table #basicTable [nzData]="searchList">
  <thead>
    <tr>
      <th>{{ $t('_engineName') }}</th>
      <th>{{ $t('_engineUrl') }}</th>
      <th>{{ $t('_icon') }}</th>
      <th>{{ $t('_desc') }}</th>
      <th>{{ $t('_isDisable') }}</th>
      <th>{{ $t('_action') }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of searchList; index as idx; trackBy: trackByItem">
      <td width="150px">
        <input nz-input [(ngModel)]="data.name" maxlength="10" />
      </td>
      <td width="220px">
        <input *ngIf="!data.isInner" nz-input [(ngModel)]="data.url" />
      </td>
      <td width="260px" class="whitespace-nowrap">
        <img *ngIf="data.icon" [src]="data.icon" class="icon" />
        <input
          nz-input
          type="text"
          [(ngModel)]="data.icon"
          style="width: 180px"
        />
        <app-upload (onChange)="onChangeUpload($event, idx)"></app-upload>
      </td>
      <td width="220px">
        <input nz-input [(ngModel)]="data.placeholder" maxlength="50" />
      </td>
      <td width="100px">
        <nz-switch [(ngModel)]="data.blocked"></nz-switch>
      </td>
      <td class="select-none">
        <a (click)="moveUp(idx)">{{ $t('_moveUp') }}</a>
        <a (click)="moveDown(idx)" class="ml-2.5">{{ $t('_moveDown') }}</a>
        <a
          *ngIf="!data.isInner"
          nz-popconfirm
          nzPopconfirmPlacement="rightTop"
          nzOkType="danger"
          [nzPopconfirmTitle]="$t('_confirmDel')"
          nzPopconfirmPlacement="bottom"
          (nzOnConfirm)="handleDelete(idx)"
          class="ml-2.5 color-red"
        >
          {{ $t('_del') }}
        </a>
      </td>
    </tr>
  </tbody>
</nz-table>
